html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="./js/bootstrap.min(1).js"></script>
    <script src="./js/jquery.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
            padding-top: 20px;
        }
        .card {
            margin-bottom: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card-header {
            border-radius: 10px 10px 0 0 !important;
        }
        .table th {
            background-color: #f1f3f5;
        }
        .action-buttons .btn {
            margin-right: 5px;
            min-width: 70px;
        }
        .badge-status {
            padding: 5px 10px;
            border-radius: 50px;
            font-weight: 500;
        }
        .search-box {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .modal-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4 text-primary">
            <i class="bi bi-box-seam"></i> 商品管理系统
        </h1>
        
        <!-- 商品类型管理 -->
        <div class="card">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h3 class="mb-0"><i class="bi bi-tags"></i> 商品类型管理</h3>
                <button class="btn btn-light btn-sm" onclick="showAddTypeModal()">
                    <i class="bi bi-plus-circle"></i> 添加类型
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead>
                            <tr>
                                <th width="10%">ID</th>
                                <th width="25%">类型名称</th>
                                <th width="35%">描述</th>
                                <th width="20%">创建时间</th>
                                <th width="10%">操作</th>
                            </tr>
                        </thead>
                        <tbody id="typeTableBody">
                            <!-- 类型数据将通过JS动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 商品管理 -->
        <div class="card">
            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                <h3 class="mb-0"><i class="bi bi-boxes"></i> 商品管理</h3>
                <button class="btn btn-light btn-sm" onclick="addProduct()">
                    <i class="bi bi-plus-circle"></i> 添加商品
                </button>
            </div>
            <div class="card-body">
                <div class="search-box mb-4">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-search"></i></span>
                                <input type="text" class="form-control" id="productSearch" placeholder="搜索商品名称">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <select class="form-select" id="typeFilter">
                                <option value="">所有类型</option>
                                <!-- 类型选项将通过JS动态加载 -->
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="form-select" id="statusFilter">
                                <option value="">所有状态</option>
                                <option value="active">上架</option>
                                <option value="inactive">下架</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-primary w-100" onclick="loadProducts()">
                                <i class="bi bi-funnel"></i> 筛选
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead>
                            <tr>
                                <th width="5%">ID</th>
                                <th width="20%">商品名称</th>
                                <th width="15%">类型</th>
                                <th width="10%">价格</th>
                                <th width="10%">库存</th>
                                <th width="10%">状态</th>
                                <th width="30%">操作</th>
                                <th width="10%">创建时间</th>
                                <th width="10%">最后更新时间</th>
                            </tr>
                        </thead>
                        <tbody id="productTableBody">
                            <!-- 商品数据将通过JS动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 商品类型模态框 -->
    <div class="modal fade" id="typeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="typeModalTitle"><i class="bi bi-tag"></i> 添加商品类型</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="typeForm">
                        <input type="hidden" id="typeId">
                        <div class="mb-3">
                            <label for="typeName" class="form-label">类型名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="typeName" required>
                        </div>
                        <div class="mb-3">
                            <label for="typeDescription" class="form-label">描述</label>
                            <textarea class="form-control" id="typeDescription" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> 取消
                    </button>
                    <button type="button" class="btn btn-primary" onclick="saveType()">
                        <i class="bi bi-save"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 商品模态框 -->
    <div class="modal fade" id="productModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="productModalTitle"><i class="bi bi-box-seam"></i> 添加商品</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="productForm">
                        <input type="hidden" id="productId">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="productName" class="form-label">商品名称 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="productName" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="productType" class="form-label">商品类型 <span class="text-danger">*</span></label>
                                <select class="form-select" id="productType" required>
                                    <option value="">请选择类型</option>
                                    <!-- 类型选项将通过JS动态加载 -->
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="productPrice" class="form-label">价格 <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">¥</span>
                                    <input type="number" step="0.01" min="0" class="form-control" id="productPrice" required>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="productStock" class="form-label">库存 <span class="text-danger">*</span></label>
                                <input type="number" min="0" class="form-control" id="productStock" required>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="productStatus" class="form-label">状态 <span class="text-danger">*</span></label>
                                <select class="form-select" id="productStatus" required>
                                    <option value="active">上架</option>
                                    <option value="inactive">下架</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="productImageUrl" class="form-label">图片URL</label>
                            <input type="url" class="form-control" id="productImageUrl" placeholder="https://example.com/image.jpg">
                        </div>
                        <div class="mb-3">
                            <label for="productDescription" class="form-label">商品描述</label>
                            <textarea class="form-control" id="productDescription" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> 取消
                    </button>
                    <button type="button" class="btn btn-primary" onclick="updateProduct()">
                        <i class="bi bi-save"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title"><i class="bi bi-exclamation-triangle"></i> 确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p id="confirmMessage">确定要删除这条记录吗？此操作不可撤销！</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> 取消
                    </button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn" onclick="deleteProduct()">
                        <i class="bi bi-trash"></i> 确定删除
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</body>
</html>
<script>
    $(function(){   
        getProductList('','')
    })
    function getProductList(name,type_name){
        let productDto={name,type_name}
        $.ajax({
            url:"http://localhost:25080/product/list",
            data:JSON.stringify(productDto),
            type:"post",
            contentType:"application/json",
            success:function(data){
                console.log(data)
                if(data!=null){
                    $('tbody').empty();
                    for(const pro of data){
                        let tr=$(`<tr>
                                <th scope="row">${pro.product_id}</th>
                                <th>${pro.product_name}</th>
                                <th>${pro.type_name}</th>
                                <th>${pro.price}</th>
                                <th>${pro.stock}</th>
                                <th>${pro.status}</th>
                                <th>${pro.description}</th>
                                <th>${pro.created_at}</th>
                                <th>${pro.updated_at}</th>
                            </tr>`);
                        $('tbody').append(tr)
                    }
                }
            }
        })

    }

    //点击新增按钮
     function addProduct(){
        let product_name=$('#productName').val()
        let type_name=$('#productType').val()
        let price=$('#productPrice').val()
        let stock=$('#productStock').val()
        let status=$('#productStatus').val()
        let description=$('#productDescription').val()
        let image_url=$('#productImageUrl').val()
        let pro={product_name,type_name,price,stock,status,description,image_url}
        console.log(pro)
        $.ajax({
            url:"http://localhost:25080/product/add",
            data:JSON.stringify(pro),
            type:"post",
            contentType:"application/json",
            dataType:"text",
            success:function(data){
                console.log(data)
                if(data=="success"){
                    alert("添加成功") 
                    //关闭模态框
                    $('#addBook').modal('hide')
                    //更新页面
                    getBookList('','')
                    //清空数据
                    clearBook();
                }else{
                    alert("添加失败")
                }
            }
        })
    }
    function clearBook(){
        //清空数据
        $('#productName').val('')
        $('#productType').val('')
        $('#productPrice').val('')
        $('#productStock').val('')
        $('#productStatus').val('')
        $('#productDescription').val('')
        $('#productImageUrl').val('')
    }

    //获取详情
    function detail(productID){
        $.ajax({
            url:"http://localhost:25080/product/detail?productId="+productID,
            type:"get",
            dataType:"json",
            success:function(data){
                console.log(data)
                if(data!=null){
                    $("#productName").val(data.product_name)
                    $("#productType").val(data.type_name)
                    $("#productPrice").val(data.price)
                    $("#productStock").val(data.stock)
                    $("#productStatus").val(data.status)
                    $("#productDescription").val(data.description)
                    $("#productImageUrl").val(data.image_url)
                    $("#productId").val(data.product_id)
                }
            }
        }) 
    }
    function updateProduct(){
        let product_name=$('#productName').val()
        let type_name=$('#productType').val()
        let price=$('#productPrice').val()
        let stock=$('#productStock').val()
        let status=$('#productStatus').val()
        let description=$('#productDescription').val()
        let image_url=$('#productImageUrl').val()
        let product_id=$('#productId').val()
        let pro={product_name,type_name,price,stock,status,description,image_url}
        $.ajax({
            url:"http://localhost:25080/product/update",
            type:"post",
            data:JSON.stringify(pro),
            contentType:"application/json:charset=utf-8",
            dataType:"text",
            success:function(data){
                console.log(data)
                if(data=="success"){
                    //隐藏模态框
                    $("#eidtBookModal").modal("hide");
                    //刷新页面
                    getBookList('','');
                    
                }
            },
            error:function(){
                alert("修改失败！");
            }
        })
    }

    function deleteProduct(productID){
        $.ajax({
            url:"http://localhost:25080/product/delete?productId="+productID,
            type:"get",
            dataType:"text",
            success:function(data){
                console.log(data)
                if(data=="success"){
                    alert("删除成功！");
                    //刷新页面
                    getBookList('','');
                }
            }
        })
    }
</script>